<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search mb-20">
        <div class="breadcrumb-container input-val-box">
          <span class="allbook">总 {{ page.total }} 条记录</span>
        </div>
      </div>

      <!-- 使用 Card 组件替代表格 -->
      <el-row :gutter="20">
        <el-col v-for="(item, index) in arryList" :key="index" :span="8">
          <el-card class="card-item" shadow="hover">
            <div slot="header" class="card-header">
              <span>{{ item.name }}</span>
            </div>
            <div class="card-content">
              <img :src="advantageUrl+ item.thumb" alt="Placeholder" class="card-image" />
              <div class="card-text">
                <p>商品名称: {{ item.name }}</p>
              </div>
            </div>
            <div class="card-footer">
              <el-button size="small" @click="showlist(index)">查看详情</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页器 -->
      <el-pagination
        background
        :page-size="page.pagesize"
        :current-page="page.pageindex"
        layout="total, prev, pager, next"
        :total="page.total"
        @current-change="handleSizeChange"
        class="pagination"
      ></el-pagination>
    </div>
    <div class="height40"></div>

    <!-- 新增：商品详情对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="商品详情" width="50%">
      <div class="dialog-content">
        <h3>{{ currentItem.name }}</h3>
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="(image, idx) in currentItem.pics" :key="idx">
            <img :src="advantageUrl + image" alt="商品图片" class="carousel-image" />
          </el-carousel-item>
        </el-carousel>
        <p class="description">{{ currentItem.body }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pagination, yearDay, tableoption } from '@/utils/util.js';
import api from '@/utils/api.js';

export default {
  data() {
    return {
      yeartimeFn: yearDay,
      arryList: [], // 数据列表
      tableStyle: tableoption,
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total,
      },
      ListId: this.$route.query,
      advantageUrl: '', // 优势资源地址
      secret: '', // 秘钥
      paginatedList: [], // 新增：分页数据列表
      dialogVisible: false, // 新增：控制对话框显示状态
      currentItem: {}, // 新增：存储当前选中的商品信息
    };
  },
  created() {
    this.getAdvantageInfo(); // 获取优势资源地址和 secret
  },
  methods: {
    // 获取优势资源地址和 secret
    getAdvantageInfo() {
      this.$fetch(api.system_setting, {}).then((res) => {
        if (res.code === 0) {
          this.advantageUrl = res.vo.advantage_url;
          this.secret = res.vo.secret;
          this.fetchAdvantageData(); // 调用新的数据获取方法
        }
      });
    },
    // 拼接请求地址并获取优势资源数据
    fetchAdvantageData() {
      const requestData = {
        p: this.page.pageindex,
        open_id: this.ListId.id,
        corner_id: this.ListId.corner_id,
        secret: this.secret, // 添加 secret 到请求参数
      };
      const url = `${this.advantageUrl}api/index/getGoods`;
      this.$fetch(url, requestData).then((response) => {
        console.log(response.data.total, 'response');
        if (response.code === 200) {
          this.arryList = response.data.data; // 修改为 response.data
          this.page.total = response.data.total; // 修改为 response.total
        }
      }).catch((err) => {
        console.log(err);
      });
    },

    backlist() {
      this.$router.go(-1);
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val;
      this.fetchAdvantageData(); // 调用新的数据获取方法
    },
    showlist(index) {
      this.currentItem = this.arryList[index]; // 新增：将选中的商品信息赋值给 currentItem
      if (this.currentItem.pics && typeof this.currentItem.pics === 'string') {
        this.currentItem.pics = this.currentItem.pics.split(','); // 新增：将 pics 字符串解析为数组
      }
      this.dialogVisible = true; // 新增：打开对话框

      // 新增：调用记录访问记录的接口
      const recordViewUrl = `${this.advantageUrl}api/index/recordView`;
      const params = {
        goods_id: this.currentItem.id, // 假设商品ID存储在 currentItem.id 中
        secret: this.secret,
      };
      this.$fetch(recordViewUrl, params).then((res) => {
        if (res.code === 200) {
          console.log('访问记录已成功记录');
        } else {
          console.error('记录访问记录失败:', res.msg);
        }
      }).catch((err) => {
        console.error('记录访问记录接口调用失败:', err);
      });
    },
  },
};

</script>

<style scoped>
.card-item {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.card-header {
  font-size: 16px;
  font-weight: bold;
}
.card-content {
  display: flex;
  align-items: center;
}
.card-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 15px;
}
.card-text {
  flex: 1;
}
.card-footer {
  text-align: center;
  margin-top: 10px;
}
.pagination {
  margin-top: 20px;
  text-align: center;
}

/* 新增：对话框样式 */
.dialog-content {
  text-align: center;
}
.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.description {
  margin-top: 20px;
  text-align: left;
}
</style>
